Оператор switchMap

switchMap - это оператор высшего порядка (Higher-Order Observable) в RxJS, который используется для преобразования элементов одного потока данных (Observable) в другой поток данных. Он применяет функцию к каждому элементу и возвращает новый Observable, отменяя предыдущие внутренние Observable, если новый элемент приходит.

Давайте разберемся с примером кода и объясним каждую деталь:

import { of, interval } from 'rxjs';
import { switchMap, take } from 'rxjs/operators';

// Исходный поток данных
const source$ = interval(1000).pipe(take(3));

// Функция-преобразователь, принимающая элементы и возвращающая внутренний Observable
const transform = (value: number) => {
  // Создаем внутренний Observable с таймером
  const inner$ = interval(500).pipe(take(3));
  return inner$;
};

// Применяем switchMap для каждого элемента и отменяем предыдущий внутренний Observable, если новый элемент приходит
const result$ = source$.pipe(
  switchMap(transform)
);

// Подписываемся на результат
result$.subscribe(result => console.log(result));

В этом примере у нас есть исходный поток данных source$, который эмитит значения каждую секунду (0, 1, 2) и завершается после трех значений. Затем у нас есть функция-преобразователь transform, которая принимает каждый элемент исходного потока и возвращает внутренний Observable inner$, содержащий значения, эмитимые каждые 500 миллисекунд (0, 1, 2) и завершающийся после трех значений.

С помощью оператора switchMap мы применяем функцию-преобразователь к каждому элементу исходного потока. Если новое значение приходит, пока предыдущий внутренний Observable все еще активен, switchMap отменяет предыдущий внутренний Observable и подписывается на новый внутренний Observable.

Результат подписки на result$ выводится в консоль: 0, 1, 2, 0, 1, 2.

В данном случае, когда первое значение 0 из исходного потока приходит, switchMap применяет функцию-преобразователь transform, которая создает внутренний Observable inner$. Этот внутренний Observable эмитит значения 0, 1, 2 каждые 500 миллисекунд. Однако, перед тем как эмитить следующее значение 1 из исходного потока, switchMap отменяет предыдущий внутренний Observable и подписывается на новый внутренний Observable. Таким образом, мы получаем значения 0, 1, 2, 0, 1, 2 в результате подписки на result$.